<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { getGoodsCommentList, getGoodsCommentTotal } from '@/api/goods'

const route = useRoute()

const n = ref(1)
const obj = ref({})
const total = ref({})

const isFull = (socre, index) => {
  let max = 0
  if (socre === 30) {
    max = 1
  } else if (socre === 20) {
    max = 3
  } else {
    max = 5
  }
  return index <= max
}

const toggle = async (num, sortType) => {
  n.value = num
  const {
    data: { list }
  } = await getGoodsCommentList(route.query.goodsId, sortType, 1)
  obj.value = list
}

const init = async () => {
  const {
    data: { list }
  } = await getGoodsCommentList(route.query.goodsId, -1, 1)
  obj.value = list

  const { data } = await getGoodsCommentTotal(route.query.goodsId)
  total.value = data.total
}
init()
</script>

<template>
  <div class="comment">
    <van-nav-bar
      title="商品评价页"
      left-arrow
      fixed
      @click-left="$router.back()"
    />

    <p class="header">
      <span :class="{ activated: n === 1 }" @click="toggle(1, -1)"
        >全部({{ total.all }})</span
      >
      <span :class="{ activated: n === 2 }" @click="toggle(2, 10)"
        >好评({{ total.praise }})</span
      >
      <span :class="{ activated: n === 3 }" @click="toggle(3, 20)"
        >中评({{ total.review }})</span
      >
      <span :class="{ activated: n === 4 }" @click="toggle(4, 30)"
        >差评({{ total.negative }})</span
      >
    </p>

    <!-- 空页面 -->
    <div class="empty" v-if="!obj.data?.length">
      <img src="@/assets/empty.png" />
      <p>亲，暂无相关商品评价</p>
    </div>

    <div class="list" v-else>
      <div class="item" v-for="item in obj.data" :key="item.comment_id">
        <p>
          <img v-if="item.user.avatar_url" :src="item.user.avatar_url" />
          <img v-else src="@/assets/default-avatar.png" />
          <span class="nickname">{{ item.user.nick_name }}</span>
          <span class="star">
            <span v-for="n in 5" :key="n">
              <van-icon
                v-if="isFull(item.score, n)"
                name="star"
                size="16"
                class="full"
              />
              <van-icon v-else name="star-o" size="16" class="blank" />
            </span>
          </span>
        </p>
        <p>{{ item.content }}</p>
        <p>{{ item.create_time }}</p>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.comment {
  padding-top: 46px;
  padding-bottom: 50px;
}

.van-nav-bar {
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

  ::v-deep .van-icon-arrow-left {
    color: black;
  }
}

.full {
  color: rgb(244, 162, 19);
}

.blank {
  color: rgb(178, 178, 178);
}

.header {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  background-color: white;

  span {
    padding: 5px;
    font-size: 15px;
    color: rgb(48, 49, 51);
  }

  .activated {
    font-weight: bold;
    color: rgb(250, 34, 9);
    border-bottom: 3px solid rgb(250, 34, 9);
  }
}

.list {
  background-color: white;

  .item {
    width: 341px;
    padding: 7px 2px;
    margin: 0 auto;
    border-bottom: 0.5px solid #f5f5f5;

    p {
      width: 100%;
      line-height: 25px;
      color: #999;
    }

    p:first-child {
      display: flex;
      font-size: 12px;
      height: 25px;

      img {
        border-radius: 50%;
      }

      .nickname {
        padding: 0 5px;
      }

      .star {
        .van-icon {
          padding-right: 2px;
        }
      }
    }

    p:nth-child(2) {
      font-size: 13px;
      color: #333;
    }

    p:last-child {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
    }
  }
}

.empty {
  width: 325px;
  height: 197px;
  padding: 90px 25px;
  text-align: center;

  img {
    width: 140px;
    height: 92px;
  }

  p {
    font-size: 14px;
    color: grey;
    margin: 37px 0;
  }
}
</style>
